<template>
    <div style="opacity: .9;width: 99%;" class="drawerMenuClass">
      <div
      :style="{
        height: '84.8vh',
        marginLeft: '10px',
        overflow: 'hidden',
        position: 'absolute',
        borderRadius: '2px',
        textAlign: 'center',
        width: '98%',
        top: 0,
      }"
    >
      <div style="margin-top: 16px">
        
        <a-button type="dashed" class="pageButton" style="left: 0;opacity: 0.7;" v-show="!openMenu" @click="showDrawer1" title="地图操作"><AppstoreAddOutlined /></a-button>
        <!-- <a-button type="primary" style="pointer-events: all;margin-top: 1em;" v-show="activeKey!=2" @click="activeSomeTabs('2')">排渣口围栏</a-button> -->
      </div>
      <a-drawer
        title=""
        placement="left"
        :closable="false"
        :open="openMenu"
        :width="153"
        :height="500"
        size="large"
        :get-container="false"
        @close="onCloseMenu"
      >
      <amenu :showDrawer="showDrawer" :showDrawerLine="showDrawerLine"
      :updateStartDrive="updateStartDrive" :onCloseMenu="onCloseMenu"></amenu>
      <a-button type="dashed" class="pageButton" style="right: -38px;" @click="toggleDrawer1"><DoubleLeftOutlined /></a-button>
      </a-drawer>
    </div>

  </div>
</template>
<script setup>
import amenu from '../components/Amenu.vue'
import { h, ref, watch } from 'vue';
const props = defineProps({
  showDrawer:Function,
  showDrawerLine:Function,
})
const { 
  showDrawerLine,
 } = props;
const openMenu = ref(false);
const startDrive = ref(0);

const showDrawer1 = () => {
  openMenu.value = true;
};
const toggleDrawer1 = () => {
  openMenu.value = !openMenu.value;
};
const onCloseMenu = () => {
  openMenu.value = false;
};
const updateStartDrive = () => {
  startDrive.value = Math.random()
};

defineExpose({
    toggleDrawer1,
    onCloseMenu
});
</script>

<style scoped>
.pageButton {
  pointer-events: all; position: absolute; top: 50%; transform: translate(0, -50%);display: flex;width: 31px; padding: 1.3em 0px; justify-content: center;align-items: center;
}
</style>
<style lang="stylus">
.drawerMenuClass .ant-menu-inline {
  width auto !important
}

.drawerMenuClass .ant-drawer .ant-drawer-content {
  background transparent
}
.drawerMenuClass
  .ant-steps .ant-steps-item-finish>.ant-steps-item-container>.ant-steps-item-content>.ant-steps-item-title
  {
    color:white;
  }
  .ant-steps .ant-steps-item-process>.ant-steps-item-container>.ant-steps-item-content>.ant-steps-item-title
  {
    color:#7c96ff;
  }
  .ant-steps .ant-steps-item-subtitle {
    color #5e68c9
  }
  .ant-steps .ant-steps-item-wait>.ant-steps-item-container>.ant-steps-item-content>.ant-steps-item-title {
    color #ffffff73
  }
  .ant-steps .ant-steps-item-wait .ant-steps-item-icon {
    color #ffffff0f
    background-color #1b1b1b
  }
  .ant-steps .ant-steps-item-wait .ant-steps-item-icon >.ant-steps-icon {
    color #b8b8b8a6
  }
  .centerview .ant-steps .ant-steps-item-wait .ant-steps-item-icon >.ant-steps-icon {
    color #595959
  }
  .ant-steps .ant-steps-item:not(.ant-steps-item-active)>.ant-steps-item-container[role='button']:hover .ant-steps-item-title {
    color #d5e0ff
  }
  .ant-drawer-left>.ant-drawer-content-wrapper {
    box-shadow unset
  }
  .ant-steps .ant-steps-item-description {
    height: 69px;
    overflow: auto;
  }
  .ant-steps.ant-steps-navigation .ant-steps-item .ant-steps-item-container[role='button'] {
    align-content: center;
  }
</style>